<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/mall/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="/mall/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="/mall/vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="/mall/vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/mall/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/mall/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/mall/favicon.png">
    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
<!-- navbar-->
<header class="header mb-5" th:replace="mall/topbar::head">
</header>

<div id="all">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <!-- breadcrumb-->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">首页</a></li>
                            <li aria-current="page" class="breadcrumb-item active">所有商品</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-lg-3">
                    <!--
          *** MENUS AND FILTERS ***
          _________________________________________________________
          -->
                    <div class="card sidebar-menu mb-4">
                        <div class="card-header">
                            <h3 class="h4 card-title">分类列表</h3>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-pills flex-column category-menu">
                                <!--                                <li><a href="category.html" class="nav-link active">分类</a></li>-->
                                <li th:each="class : ${allClassify}"><a
                                        th:href="@{/MallGoods/ToClassify(classifyId = ${class.classifyId})}"
                                        th:text="${class.classifyName}" class="nav-link active">分类</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div class="col-lg-9">
                    <div class="row products">
                        <div th:each="goods : ${allGoods}" class="col-lg-4 col-md-6">
                            <div class="product">
                                <div class="flip-container">
                                    <div class="flipper">
                                        <div class="front">
                                            <a th:href="@{/MallGoods/GoodsDetail(goodsId=${goods.goodsId})}"><img
                                                    th:src="'/Images' + ${goods.goodsImg}" alt=""
                                                    class="img-fluid"></a>
                                        </div>
                                    </div>
                                </div>
                                <a th:href="@{/MallGoods/GoodsDetail(goodsId=${goods.goodsId})}" class="invisible"><img
                                        th:src="'/Images' + ${goods.goodsImg}" alt=""
                                        class="img-fluid"></a>
                                <div class="text">
                                    <h3><a th:href="@{/MallGoods/GoodsDetail(goodsId=${goods.goodsId})}"
                                           th:text="${goods.goodsName}">产品名称</a></h3>
                                    <p class="price" th:text="${goods.goodsPrice} + 元">
                                        <del></del>
                                        $143.00
                                    </p>
                                    <p class="buttons"><a th:href="@{/MallGoods/GoodsDetail(goodsId=${goods.goodsId})}"
                                                          class="btn btn-outline-secondary">查看详情</a><a
                                            th:href="@{/MallCar/AddCar(shopNumber=1,shopTotal=${goods.goodsPrice},shopGoodsId=${goods.goodsId})}"
                                            class="btn btn-primary"><i class="fa fa-shopping-cart"></i>加入购物车</a>
                                    </p>
                                </div>
                                <!-- /.text-->
                            </div>
                            <!-- /.product-->
                        </div>
                        <!-- /.products-->
                    </div>
                    <!--<div class="pages">
                        <nav aria-label="Page navigation example" class="d-flex justify-content-center">
                            <ul class="pagination">
                                <li class="page-item"><a href="#" aria-label="Previous" class="page-link"><span
                                        aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
                                <li class="page-item active"><a href="#" class="page-link">1</a></li>
                                <li class="page-item"><a href="#" class="page-link">2</a></li>
                                <li class="page-item"><a href="#" class="page-link">3</a></li>
                                <li class="page-item"><a href="#" class="page-link">4</a></li>
                                <li class="page-item"><a href="#" class="page-link">5</a></li>
                                <li class="page-item"><a href="#" aria-label="Next" class="page-link"><span
                                        aria-hidden="true">»</span><span class="sr-only">Next</span></a></li>
                            </ul>
                        </nav>
                    </div>-->
                </div>
                <!-- /.col-lg-9-->
            </div>
        </div>
    </div>
</div>
<!--
*** FOOTER ***
_________________________________________________________
-->
<div id="footer" th:replace="mall/footerbar::foot">
</div>
<!-- *** COPYRIGHT END ***-->
<!-- JavaScript files-->
<script src="/mall/vendor/jquery/jquery.min.js"></script>
<script src="/mall/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/mall/vendor/jquery.cookie/jquery.cookie.js">
</script>
<script src="/mall/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="/mall/vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="/mall/js/front.js"></script>
</body>

</html>